<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
    <link rel="stylesheet" th:href="@{static/css/index.css}"/>

</head>
<body>
<div class="generate">
    <!--顶部搜索-->
    <div class="search">
        <p class="searchInput"><input name="location" type="text" placeholder="请输入"></p>
        <p class="seek">查询</p>
    </div>
    <!--中部天气展示-->
    <div class="weathers">
        <p id="address"></p>
        <p id="airQuality"></p>
        <ul id="weatherData">
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/static/js/jquery-1.8.3.min.js}"></script>
<script type="text/javascript">

    $(function () {
        //初始化位置为西安
        getWeatherData('西安');

        $(".seek").bind('click', function () {
            var location = $("input[name='location']").val();
            if (location === undefined || null == location || location.length < 1) {
                return;
            }
            getWeatherData(location);

        });
    });

    function getWeatherData(location) {
        $.ajax({
            url: "/weather?location=" + location,
            type: "GET",
            dataType: 'json',
            success: function (data) {
                console.log(data);
                if (data === undefined || data.currentCity == null) {
                    return;
                }
                $("#address").html(data.currentCity);
                $("#airQuality").html(data.weatherData[0].weather + ' ' + data.weatherData[0].temperature);
                var _html = "";
                for (var i = 1; i < data.weatherData.length; i++) {
                    _html += '<li><p class="numberDays">' + data.weatherData[i].date + '</p>' +
                        '<p class="wea"><img src="'+data.weatherData[i].dayPictureUrl+'"></p>' +
                        '<p class="wea"></p>' +
                        '<p class="temperature">' + data.weatherData[i].temperature + '</p>' +
                        '<p class="weath">' + data.weatherData[i].weather + '</p>' +
                        '<p class="wind">' + data.weatherData[i].wind + '</p>' +
                        '</li>';
                }
                $("#weatherData").html(_html);


            }
        });
    }

</script>
</html>
